<script id="ripple_containerTemp" type="text/x-kendo-template">
    <div class="row">
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">按钮</h5>
                <div class="card-body">
                    <button class="k-button k-button-lg theme-m-bg w-100" id="buttonRipple" type="button">jQuery</button>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">单选框</h5>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-12 pb-3 text-muted">请切换至 Material Design 主题查看效果</div>
                        <div class="col-4">
                            <label class="k-radio-label"><input class="k-radio" name="radio" type="radio" value="Angular">Angular</label>
                        </div>
                        <div class="col-4">
                            <label class="k-radio-label"><input class="k-radio" name="radio" type="radio" value="React">React</label>
                        </div>
                        <div class="col-4">
                            <label class="k-radio-label"><input class="k-radio" name="radio" type="radio" value="Vue">Vue</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">复选框</h5>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-12 pb-3 text-muted">请切换至 Material Design 主题查看效果</div>
                        <div class="col-4">
                            <label class="k-checkbox-label"><input class="k-checkbox" name="checkbox" type="checkbox" value="Angular">Angular</label>
                        </div>
                        <div class="col-4">
                            <label class="k-checkbox-label"><input class="k-checkbox" name="checkbox" type="checkbox" value="React">React</label>
                        </div>
                        <div class="col-4">
                            <label class="k-checkbox-label"><input class="k-checkbox" name="checkbox" type="checkbox" value="Vue">Vue</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">列表</h5>
                <div class="card-body">
                    <ul class="list-group" id="listRipple">
                        <li class="list-group-item theme-m-bg">jQuery</li>
                        <li class="list-group-item">Angular</li>
                        <li class="list-group-item">React</li>
                        <li class="list-group-item">Vue</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        #listRipple .list-group-item {
            cursor: pointer;
        }
    </style>
</script>